
import React from 'react';
import { Form } from "antd";
import * as THREE from 'three';
import Controller from 'Controller';
import Vector3Input from 'components/Vector3Input';

/** 位置 */
export default function Position() {

    const threeController = Controller.instance.useMemo(s => s.threeController, [])

    const selectedElementUuid = threeController.useMemo(s => s.selectedElementUuid, []);

    const elementMap = threeController.useMemo(s => s.elementMap, []);

    const [position, setPosition] = React.useState(new THREE.Vector3());

    const onChangePosition = React.useCallback((e: THREE.Vector3) => {
        if (!selectedElementUuid) return;

        const object3D = elementMap.get(selectedElementUuid)?.getObject3D()
        if (!object3D) return;
        
        object3D.position.set(e.x, e.y, e.z);
    }, [elementMap, selectedElementUuid])

    React.useEffect(() => {
        const t = setInterval(() => {
            if (!selectedElementUuid) return;

            const object3D = elementMap.get(selectedElementUuid)?.getObject3D()
            if (!object3D) return;

            setPosition(new THREE.Vector3(object3D.position.x, object3D.position.y, object3D.position.z))
        }, 30);
        return () => {
            clearInterval(t);
        }
    }, [elementMap, selectedElementUuid])

    return (
        <Form.Item label='位置' tooltip='表示对象局部位置的' >
            <Vector3Input
                value={position}
                onChange={onChangePosition}
            />
        </Form.Item>
    )
}